
<!-- 实时突变预警 -->
<template>
  <div class="pagestyle">
    <list_controller
      :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }"
      ref="zujianname"
      :options="state.options"
      :showCaozuo="true"
    >
      <template v-slot:opraCurdBtnAll>
        <span
          :class="state.listBtnType == 3 ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="listInfoBtnClick(3)"
        >
          <svg-icon
            :class="state.listBtnType == 3 ? 'active' : ''"
            class-name="search-icon"
            icon-class="dayin"
          />
          打印
        </span>
        <span
          :class="state.listBtnType == 4 ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="listInfoBtnClick(4)"
        >
          <svg-icon
            :class="state.listBtnType == 4 ? 'active' : ''"
            class-name="search-icon"
            icon-class="xiazai"
          />
          下载
        </span>
        <div class="xiazai" v-if="state.showDownload && state.listBtnType == 4">
          <div class="item" @click="downloadFn(1)">下载当前页</div>
          <div class="item" @click="downloadFn(2)">下载全部页</div>
        </div>
        <!-- <span
          :class="state.listBtnType == 6 ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="listInfoBtnClick(6)"
        >
          <svg-icon
            :class="state.listBtnType == 6 ? 'active' : ''"
            class-name="search-icon"
            icon-class="tongjishuju"
          />
          统计数据
        </span> -->
      </template>
      <template v-slot:selectNamelist> 实时突变预警 </template>
      <template v-slot:listSS="{ row, field }">
        <div
          v-if="field == 'durationTime'"
          >{{computTime(row)}}</div
        >
      </template>
    </list_controller>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title" style="color:#3E464F;margin:0;">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>态势分析</span></h4>
      </template>
      <div>
        <realChartCom :targetTime="state.targetTime" :pointDataList="state.pointDataList" 
        :drawerShow="state.drawerShow" :nomoreType="1" :grandType="2"></realChartCom>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import ayasdataCom from "./listCom/ayasdataCom.vue";
import fillayaCom from "./listCom/fillayaCom.vue";
import ayadetailCom from "./listCom/ayadetailCom.vue";
import list_controller from "@/components/commonCom/list_controller";
import realChartCom from "./listCom/realChartCom.vue";
import { computed, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps = import.meta.env.VITE_APP_HTTP;
const upload = ref(null);
let state = reactive({
  detailsShow: false,
  detailsList: [],
  fillayaComShow: false, //控制填写分析抽屉显示
  listBtnType: undefined,
  options: {
    refreshShow:true,
    tableheads: computed(() => table_headers.realStationInfo),
    listSS:[
      {field: "durationTime"},
    ],
    queryList: {
      querys: [],
    },
    dataUrl: "/realStationData/listStationInfo",
  },
  tempList: [],
  // 表单
  editId: undefined,
  showDownload:false,
  drawerShow: false,
  pointDataList: [],
  targetTime: '',
});

// 下载列表内容
const downloadFn =async (n) => {
  if(n == 2){
  await  proxy.$refs.zujianname.getAllData()
  }
  setTimeout(() => {
    store.isDownload = n
    state.showDownload = false
    state.listBtnType = undefined;
  }, 200);
}
// 打印顶部内容模板
const topHtml = `
<h1 class="title">实时断电信息</h1>
`
// 打印样式
const printStyle = `
.title {
  text-align: center;
}
`
// 打印列表内容
const printList = () => {
  proxy.$refs['zujianname'].vxe.xGrid.print({
    style: printStyle,
    beforePrintMethod: ({ content }) => {
      return topHtml + content
    }
  })
}
// 填写分析抽屉
function lookBtn(row) {
  state.editId = row.id;
  state.fillayaComShow = dayjs().unix();
}
// 提交填写分析
function submitFormfillayaCom(data) {
  let dataObj = {};
  dataObj.id = state.editId;
  dataObj.templateDto = data;
  if (data) {
    axios.post("/template/analysis/updateAnalysis", dataObj).then((res) => {
      proxy.$modal.msgSuccess(res.msg);
      state.fillayaComShow = false;
      proxy.$refs.zujianname.getData({});
    });
  } else {
    state.fillayaComShow = false;
  }
}
// 新增按钮
function listInfoBtnClick(type) {
  console.log();
  
  state.listBtnType = type;
  if(type == 1){
    goPage()
  }
  if (type == 2) {
      // state.targetTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      console.log(proxy.$refs.zujianname.vxe.state.records, "打的卡");
      if (proxy.$refs.zujianname.vxe.state.records.length > 0) {
        state.drawerShow = true
        state.pointDataList = proxy.$refs.zujianname.vxe.state.records
      } else {
        proxy.$modal.msgWarning('请先选择数据!')
      }
    }
  if(type == 3){
    printList()
  }
  if(type == 4){
    state.showDownload = !state.showDownload
  }
}
// 编辑按钮
function editBtn(row) {
  state.detailsShow = dayjs().unix();
  state.detailsList = row.templateDto;
}
// 关闭统计数据
const close = () => {
  state.listBtnType = undefined
}
// 计算累计时间
const computTime = (row) => {
  if(row.durationTime){
    setInterval(() => {
      const now = new Date(); // 当前时间
      const target = new Date(row.prealarmStartTime); // 目标时间
      const diff = Math.abs(now - target); // 时间差（毫秒）
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      row.durationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
    }, 1000);
  }else{
    const now = new Date(); // 当前时间
    const target = new Date(row.prealarmStartTime); // 目标时间
    const diff = Math.abs(now - target); // 时间差（毫秒）
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);
    row.durationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
  }
  return row.durationTime
}

// 跳转历史预报警异常页面
const goPage = () => {
  router.push({name:'Cx_hisYBAlarmList'})
}
</script>
<style lang="scss" scoped>
.xiazai{
  position: absolute;
  top: 42px;
  right:241px;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffff;
  box-shadow:  0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  z-index: 99;
  .item{
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .item:hover{
    background-color: #ececec;
  }
}
.pagestyle {
  display: flex;
  justify-content: space-between;
}
</style>
